<template>
<div class="buy">
    <div class="container">
        <div class="header">
            <h2>{{$t('tosell.main[0]')}} </h2>
            <h3>{{$t('tosell.main[1]')}}</h3>
        </div>
        <div class="input_box">
            <div class="item">
                <div class="label">{{$t('tosell.main[2]')}}</div>
                <div class="input">
                    <input :placeholder="$t('tosell.tips[2]')" v-model="price">
                    <span>CNY</span>
                </div>
            </div>
            <div class="item">
                <div class="label">{{$t('tosell.main[3]')}} </div>
                <div class="input">
                    <input :placeholder="$t('tosell.tips[3]')" v-model="number">
                    <span>USDT</span>
                </div>
            </div>
            <div class="item">
                <div class="label">{{$t('tosell.main[4]')}}</div>
                <div class="row">
                    <div class="input">
                        <input :placeholder="$t('tosell.tips[4]')" v-model="max">
                        <span>CNY</span>
                    </div>
                    <div class="input">
                        <input :placeholder="$t('tosell.tips[5]')" v-model="min">
                        <span>CNY</span>
                    </div>
                </div>
            </div>
            <div class="payway">
                <div class="label">{{$t('tosell.main[5]')}}</div>
                <div class="tabs">
                    <div class="tab_item" v-if="bank" :class="{active:openBank}" @click="openBank=!openBank">
                        <img src="../../assets/img/icon-yinlian.png" alt="">{{$t('tosell.main[6]')}}
                    </div>
                    <div class="tab_item" v-if="ali" :class="{active:openAli}" @click="openAli=!openAli">
                        <img src="../../assets/img/icon-alipay.png" alt="">{{$t('tosell.main[7]')}}
                    </div>
                    <div class="tab_item" v-if="weixin" :class="{active:openWx}" @click="openWx=!openWx">
                        <img src="../../assets/img/icon_weixin.png" alt="">{{$t('tosell.main[8]')}}
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="label">{{$t('tosell.main[9]')}}</div>
                <div class="input">
                    <input type="text" :placeholder="$t('tosell.tips[10]')" v-model="remark">
                    <!-- <span>CNY</span> -->
                </div>
            </div>
            <div class="btn">
                <el-button type="primary" @click="submitForm()">{{$t('tosell.main[10]')}}</el-button>
            </div>
        </div>
    </div>
    <div class="trade_list">
        <div class="title">
            <span>{{$t('tosell.list[0]')}}</span>
            <router-link to="/applyorder">{{$t('tosell.list[1]')}}</router-link>
        </div>
        <el-table :data="tradelist.data" style="width: 100%">
            <el-table-column prop="order_no" :label="$t('tosell.list[2]')" align="center" width="220px"></el-table-column>
            <el-table-column prop="trans_num" :label="$t('tosell.list[3]')" align="left"></el-table-column>
            <el-table-column prop="surplus_num" :label="$t('tosell.list[4]')" align="left"></el-table-column>
            <el-table-column prop="total_price" :label="$t('tosell.list[5]')" align="left"></el-table-column>
            <el-table-column prop="price" :label="$t('tosell.list[6]')" align="left"></el-table-column>
            <el-table-column prop="created_at" :label="$t('tosell.list[7]')" align="left"></el-table-column>
            <el-table-column prop="name" :label="$t('tosell.list[8]')" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" v-if="scope.row.status==1" @click="cancelOrder(scope.row.order_no)">{{$t('tosell.list[9]')}}</el-button>
                    <el-button type="text" size="small" v-if="scope.row.status==2">{{$t('tosell.list[10]')}}</el-button>
                    <el-button type="text" size="small" v-if="scope.row.status==3">{{$t('tosell.list[11]')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog :title="$t('tosell.main[11]')" width="40%" top="25vh" center :visible.sync="showDialog">
        <el-form :model="form">
            <el-form-item :label="$t('tosell.main[12]')">
                <el-input v-model="form.password" type="password" :placeholder="$t('tosell.tips[6]')" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showDialog = false">{{$t('tosell.main[13]')}}</el-button>
            <el-button type="primary" @click="submit()">{{$t('tosell.main[14]')}}</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import {
    Hidephone,
    Passwordencryption
} from "@/libs/util";
import {
    issueorderlist,
    commondata,
    paylist,
    revokeorder,
    accountinfo
} from "@/api/fbTrade";
export default {
    name: 'buy',
    data() {
        return {
            price: '',
            number: '',
            min: '',
            max: '',
            remark: '',
            tradelist: {
                data: []
            },
            showDialog: false,
            form: {
                password: ''
            },
            paylist: [],
            openBank: true,
            openAli: true,
            openWx: true,
            useraccount: {}
        }
    },
    watch: {
        "price": function (val, oval) {
            if (isNaN(Number(val))) {
                this.price = oval;
                return false;
            } else {
                if (val.toString().indexOf('.') != -1 && val.toString().split(".")[1].length > 2) {
                    this.price = oval;
                    this.$message.error(this.$t('tosell.tips[0]'), 'warning', this);
                    return false;
                }
            }
        },
        "number": function (val, oval) {
            if (isNaN(Number(val))) {
                this.number = oval;
                return false;
            } else {
                if (val.toString().indexOf('.') != -1 && val.toString().split(".")[1].length > 4) {
                    this.number = oval;
                    this.$message.error(this.$t('tosell.tips[1]'), 'warning', this);
                    return false;
                }
            }
        },
    },
    computed: {
        bank() {
            for (let item of this.paylist) {
                if (item.payment_type == 1) return true
            }
            return false
        },
        ali() {
            for (let item of this.paylist) {
                if (item.payment_type == 2) return true
            }
            return false
        },
        weixin() {
            for (let item of this.paylist) {
                if (item.payment_type == 3) return true
            }
            return false
        }
    },
    created() {
        this.getList();
        this.getpaylist();
        this.getprice();
        this.accountinfo();

    },
    methods: {
        getList() {
            let _data1 = {
                order_type: "1",
            };
            issueorderlist(_data1).then(res => {

                this.tradelist = res;

            }).catch(err => {});
        },
        getpaylist() { //支付方式
            paylist({
                status: '1'
            }).then((res) => {

                if (res.length == 0) {
                    this.$message.error('请先设置支付方式');
                    this.$router.push('/payways')
                }
                this.paylist = res

            });
        },
        getprice() { //默认价格
            commondata().then((res) => {

                this.price = res.mark_price

            });
        },
        accountinfo() {
            accountinfo({
                account: '3'
            }).then((res) => {

                this.useraccount = res

            });
        },
        submitForm() {
            if (!this.price) {
                this.$message.error(this.$t('tosell.tips[2]'));
                return false;
            } else if (!this.number) {
                this.$message.error(this.$t('tosell.tips[3]'));
                return false;
            } else if (!this.max) {
                this.$message.error(this.$t('tosell.tips[4]'));
                return false;
            } else if (!this.min) {
                this.$message.error(this.$t('tosell.tips[5]'));
                return false;
            } else if (Number(this.number) > Number(this.useraccount.total_usdt)) {
                this.$message.error(this.$t('tosell.tips[7]'));
                return false;
            } else if (Number(this.min) > Number(this.max)) {
                this.$message.error(this.$t('tosell.tips[8]'));
                return false;
            } else if (Number(this.min) < Number(this.price)) {
                this.$message.error(this.$t('tosell.tips[9]'));
                return false;
            } else {
                this.showDialog = true
            }
        },
        submit() {
            if (!this.form.password) {
                this.$message.error(this.$t('tosell.tips[6]'));
                return false;
            }
            let data = {
                order_type: '1',
                wid: '1',
                min_price: this.min,
                max_price: this.max,
                trans_num: this.number,
                price: this.price,
                payment_password: this.form.password,
                notes: this.remark,
                pay_method: ''
            }
            let arr = []
            if (this.bank && this.openBank) arr.push(1)
            if (this.ali && this.openAli) arr.push(2)
            if (this.weixin && this.openWx) arr.push(3)
            data.pay_method = arr.join();

            issueorderlist(Passwordencryption(data)).then(res => {

                this.$message.success("操作成功");
                this.$router.push('/fabitransaction')

            })
        },
        cancelOrder(id) {
            revokeorder({
                order_no: id,
                order_type: '1'
            }).then((res) => {

                this.$message.success("取消订单成功！");
                this.getList()

            });
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
.buy {
    width: 1280px;
    margin: 0 auto;
    color: #999;

    .container {
        width: 980px;
        margin: 0 auto;
        overflow: hidden;

        .header {
            text-align: center;
            margin: 50px 0;

            h2 {
                font-size: 36px;
                color: #fff;
            }

            h3 {
                font-size: 16px;
                color: #BBBBBB;
                margin-top: 20px;
            }
        }

        .input_box {
            .item {
                .label {
                    color: #fff;
                    font-size: 16px;
                    line-height: 50px;
                }

                .row {
                    display: flex;
                    justify-content: space-between;

                    .input {
                        width: 48%;
                    }
                }

                .input {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 20px;
                    background-color: #131C28;

                    input {
                        width: 80%;
                        height: 50px;
                        background-color: #131C28;
                        border-radius: 4px;
                        color: #fff;
                        font-size: 16px;
                    }
                }
            }

            .payway {
                .label {
                    color: #fff;
                    font-size: 16px;
                    line-height: 50px;
                }

                .tabs {
                    display: flex;
                    justify-content: space-between;

                    .tab_item {
                        width: 30%;
                        height: 42px;
                        line-height: 42px;
                        background: rgba(19, 28, 40, 1);
                        text-align: center;

                        &.active {
                            border: 1px solid #6185E5;
                            color: #6185E5;
                        }

                        img {
                            vertical-align: middle;
                            margin-right: 10px;
                        }
                    }
                }
            }

            .btn button {
                margin-top: 50px;
                width: 100%;
            }
        }
    }

    .trade_list {
        margin-top: 50px;

        .title {
            margin-bottom: 40px;

            span {
                color: #fff;
                font-size: 32px;
            }

            a {
                float: right;
                color: #6185E5;
                font-size: 16px;
                margin-top: 20px;
            }
        }
    }

    .dialog-footer {
        button {
            width: 200px;
        }
    }
}
</style>
